<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta content="initial-scale=1.0, user-scalable=no" name="viewport"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!--    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=kHuT1n634XyhUTcOU3oPa2ovhKbOK5NN"></script>-->
    <script src="//api.map.baidu.com/api?v=2.0&ak=GK3ctY7OcQhGLI2bVysHCeZy6p319CYY" type="text/javascript"></script>
    <title></title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    var mapData = null;


    //地图初始化
    var bm = new BMap.Map("allmap");
    /*获取充电桩数据*/
    $(function () {
        $.get("/jingli-admin/index/getPlotPile", function (result) {
            mapData = result.data;
            if (mapData != null) {
                bm.centerAndZoom(new BMap.Point(mapData[0].lng, mapData[0].lat), 15);
                bm.enableScrollWheelZoom(true);
            }
            //开启鼠标滚轮缩放
        });
    })


    //坐标转换完之后的回调函数
    translateCallback = function (data) {
        if (data.status === 0) {
            for (var i = 0; i < data.points.length; i++) {
                //bm.addOverlay(new BMap.Marker(data.points[i]));
                addMarker(mapData)
                //bm.setCenter(data.points[i]);
            }
        }
    }


    setTimeout(function () {
        /*坐标超限制解决*/
        var total = 0; //总记录数
        var groupCount = 0; //每次转十条
        if (mapData.length % 10 > 0) {
            groupCount = (mapData.length / 10) + 1;
        } else {
            groupCount = (mapData.length / 10);
        }
        for (var i = 0; i < groupCount; i++) { //外层循环，有多少组十条
            var pos = new Array();
            for (var j = 0; j < 10; j++) { //内层循环，每组十条
                if (total < mapData.length) { //不超过总记录数结束
                    var point = new BMap.Point(mapData[(i * 10) + j].lng, mapData[(i * 10) + j].lat);
                    pos.push(point);
                }
                total++;
            }
            var convertor = new BMap.Convertor();
            convertor.translate(pos, 1, 5, translateCallback)
        }
    }, 1000);

    function addMarker(mapData) {  // 创建图标对象

        // 创建标注对象并添加到地图
        for (var i = 0, pointsLen = mapData.length; i < pointsLen; i++) {
            var point = new BMap.Point(mapData[i].lng, mapData[i].lat);
            var marker = new BMap.Marker(point);
            var label = new BMap.Label(mapData[i].pileCount, {
                offset: new BMap.Size(5, 4)
            });
            label.setStyle({
                background: 'none', color: '#fff', border: 'none'//只要对label样式进行设置就可达到在标注图标上显示数字的效果
            });
            marker.setLabel(label);//显示地理名称 a
            bm.addOverlay(marker);
            //给标注点添加点击事件。使用立即执行函数和闭包
            addClickHandler(mapData[i], marker);

        }

    }

    function addClickHandler(data, marker) {
        marker.addEventListener("click", function (e) {
                openInfo(data, e)
            }
        );

    }

    function openInfo(data, e) {
        var opts = {
            width: 250,     // 信息窗口宽度
            height: 80,     // 信息窗口高度
            title: data.plotName, // 信息窗口标题
            enableMessage: true//设置允许信息窗发送短息
        };
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow("充电桩数量：" + data.pileCount + "台", opts);  // 创建信息窗口对象
        bm.openInfoWindow(infoWindow, point); //开启信息窗口
    }

</script>
